<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div style="height: 20px; font-size: 30px" id="demo"></div>
    <div>
        <div style="width: 765px; height: 30px; background: purple; margin: auto auto">
            <button @click="footBook">脚本</button>
        </div>
        <div style="height: 765px; width: 550px; float: right">
            <div style="height: 765px; width: 350px; float: left">
                <table border="1">
                    <tr>
                        <td style="width: 110px; font-size: 20px; text-align: center">昵称</td>
                        <td style="width: 110px; font-size: 20px; text-align: center">成绩</td>
                        <td style="width: 110px; font-size: 20px; text-align: center">日期</td>
                    </tr>
                    <tr style="text-align: center" v-for="user in users">
                        <td>{{user.userName}}</td>
                        <td>{{user.grade}}s</td>
                        <td>{{user.createTime}}</td>
                    </tr>
                </table>
            </div>
        </div>
        <div style="height: 765px; width: 550px; float: left">
            <div style="height: 765px; width: 350px; float: right">
                <table border="1">
                    <tr>
                        <td style="width: 110px; font-size: 20px; text-align: center">昵称</td>
                        <td style="width: 110px; font-size: 20px; text-align: center">成绩</td>
                        <td style="width: 110px; font-size: 20px; text-align: center">日期</td>
                    </tr>
                    <tr style="text-align: center" v-for="user in allUsers">
                        <td>{{user.userName}}</td>
                        <td>{{user.grade}}s</td>
                        <td>{{user.createTime}}</td>
                    </tr>
                </table>
            </div>
        </div>
        <div style="width: 765px; height: 765px; background: white; margin: auto auto">
            <div v-for="random in randoms" v-text="random" :id="'index'+random" @click="isTrue(random)"
                 style="width: 150px; height: 150px;background: pink; border: 1px solid; border-radius: 25px; float: left; font-size: 30px; line-height: 150px; text-align: center"></div>
        </div>
        <div style="width: 765px; margin: 0 auto">
            <div style="width: 300px; height: 50px; display: block; background: yellow; float: left; border-radius: 5px; font-size: 30px; line-height: 50px; text-align: center">
                {{second}}s
            </div>
            <button style="display:block;height: 50px;width: 165px;margin:0 auto;float: left" @click="start()">点击开始
            </button>
            <div style="width: 300px; height: 50px; display: block; background: yellow; float: left; border-radius: 5px; font-size: 30px; line-height: 50px; text-align: center">
                {{index}}
            </div>
        </div>
    </div>
</div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script>
    let index = 1;  // 当前应点击数字
    let flag = 1;   // 刷新判断
    var time;       // 计时器
    var myVar = setInterval(function () {
        myTimer()
    }, 1000);

    function myTimer() {
        var d = new Date();
        var t = d.toLocaleTimeString();
        document.getElementById("demo").innerHTML = t;
    };

    function sleep(millisecond) {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve()
            }, millisecond)
        })
    }

    new Vue({
        el: "#app",
        data: {
            randoms: [],
            showIndex: 1,
            second: 0,
            users: {},
            allUsers:{},
            grade:{},
        },
        methods: {
            createData() {
                axios.get("http://localhost:9090/data/data").then((res) => {
                    this.randoms = res.data;
                })
            },
            // 方格判断
            isTrue(random) {
                randomIndex = "index" + random.toString();
                if (random == index) {
                    index++;
                    this.showIndex = index;
                    document.getElementById(randomIndex).style.background = "green"
                    setTimeout(function () {
                        for (let j = 1; j <= 25; j++) { //将所有方格都变为粉色
                            randomAll = "index" + j.toString();
                            document.getElementById(randomAll).style.background = "pink"
                        }
                    }, 800);
                } else {    // 报错提醒
                    document.getElementById(randomIndex).style.background = "red"
                }
                if (index >= 26) {  // 挑战成功
                    alert("挑战成功");
                    this.comple();
                    clearInterval(time);
                    location.reload();
                }
            },
            // 开始
            start() {
                //第一次开始
                flag = undefined ? 1 : flag
                if (flag == 1) {
                    this.clock();
                    flag++;
                } else {
                    this.second = 0;
                    document.getElementById(randomIndex).style.background = "pink"
                    index = 1;
                }
                this.createData();

            },
            // 倒计时
            clock() {
                _this = this;
                time = setInterval(function () {
                    _this.second++;
                }, 1000);
            },
            // 脚本外挂
            footBook() {
                var sign = 1;
                var random;
                var button;
                var timer = setInterval(function () {
                    random = "index" + sign.toString();
                    button = document.getElementById(random);
                    button.click();
                    sign++;
                }, 300);
                if (sign >= 26) {
                    setTimeout(timer);
                }
            },
            getAllGrade() {
                axios.get("http://localhost:9090/grade/AllGrade").then((res) => {
                    this.allUsers = res.data;
                })
            },
            getUserGrade(id) {
                axios.get("http://localhost:9090/grade/userGrade?id=" + id).then(res => {
                    this.users = res.data;
                })
            },
            comple(){
                _this = this;
                _this.grade.grade = this.second;
                _this.grade.userName = this.users[0].userName;
                _this.grade.userId = this.users[0].userId;
                axios.post("http://localhost:9090/grade/addGrade",this.grade).then((res)=>{
                })
            }
        },
        created() {
            this.createData();//获取验证码
            let id = location.href.substring(location.href.indexOf("=") + 1);
            this.getAllGrade();
            this.getUserGrade(id);
        }
    })
</script>
</html>